<template>
	<view>
		<u-popup border-radius="20" v-model="open" mode="center">
			<view class="content bs nickname" v-if="type=='nickname'">
				<view class="top df-xb">
					<view @click="open=false" class="cancel fs32 fb highlight">取消</view>
					<view class="title fb">{{title[type]}}</view>
					<view @click="confirm('nickname')" class="confirm fs32 fb highlight">确认</view>
				</view>
				<view class="inner">
					<view class="input nickname">
						<u-input v-model='temUserInfo.nickname' placeholder="请输入昵称"></u-input>
					</view>
				</view>
			</view>
			<view v-if="type=='birthday'" class="content bs birthday">
				<view class="top df-xb">
					<view @click="open=false" class="cancel fs32 fb highlight">取消</view>
					<view class="title fb">{{title[type]}}</view>
					<view @click="confirm('birthday')" class="confirm fs32 fb highlight">确认</view>
				</view>
				<view class="inner">
					<view class="birthday">
						<gpp-date-picker ref="datePicker" @onConfirm="onConfirm" :startDate="startDate"
							:endDate="endDate" :defaultValue="pickerDate">
						</gpp-date-picker>
					</view>
				</view>
			</view>
			<view v-if="type=='gender'" class="content bs">
				<view class="top df-xb">
					<view @click="open=false" class="cancel fs32 fb highlight">取消</view>
					<view class="title fb">{{title[type]}}</view>
					<view @click="confirm('gender')" class="confirm fs32 fb highlight">确认</view>
				</view>
				<view class="inner">
					<view class="gender bs df-yb">
						<view class="image df-xb">
							<image @click="set('gender','1')" style="width: 178rpx;height:178rpx ;"
								:src="temImgUrl+'/boy.png'" mode="widthFix">
							</image>
							<image @click="set('gender','2')" style="width: 178rpx;height:178rpx ;"
								:src="temImgUrl+'/girl.png'" mode="widthFix">
							</image>
						</view>
						<view class="radio w100 df">
							<u-radio-group v-model="temUserInfo['gender']">
								<view style="width:410rpx;padding: 0 70rpx;" class="df-xb">
									<view :class="{'opacity-tr':gender[0].name!=temUserInfo.gender}">
										<u-radio active-color="#e29f63" :name="gender[0].name">
										</u-radio>
									</view>
									<view :class="{'opacity-tr':gender[1].name!=temUserInfo.gender}">
										<u-radio active-color="#e29f63" :name="gender[1].name">
										</u-radio>
									</view>
								</view>
							</u-radio-group>
						</view>
						<view class="name df-xb">
							<view class="df-c" style="width: 178rpx;">
								<text style="margin-top: 38rpx;" class="fs32">男</text>
							</view>
							<view class="df-c" style="width: 178rpx;">
								<text style="margin-top: 38rpx;" class="fs32">女</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import gppDatePicker from "@/components/gpp-datePicker/gpp-datePicker.vue"
	export default {
		props: {

		},
		components: {
			gppDatePicker
		},
		data: function() {
			return {
				startDate: "1901-01-01",
				pickerDate:this.$tools.timestamp(new Date() / 1000),
				open: false,
				type: "",
				title: {
					nickname: "设置昵称",
					birthday: "设置出生日期",
					gender: "设置性别"
				},
				gender: [{
						name: '1',
						checked: false
					},
					{
						name: '2',
						checked: false
					}
				],
				//临时存储用户信息
				temUserInfo: {},
				temImgUrl: this.$IMG_URL_TEMP
			}
		},
		methods: {
			onConfirm(e) {
				this.pickerDate = e.dateValue;
			},
			set(type, value) {
				this.$set(this.temUserInfo, type, value)
			},
			show(type) {
				this.type = type
				this.open = true
			},
			radioChange(e) {
			},
			confirm(type) {
				if (type == 'birthday') {
					this.$refs.datePicker.onConfirm()
					this.set(type, this.pickerDate)
				}
				this.$store.commit('editUserInfo', {
					key: type,
					value: this.temUserInfo[type]
				})
				this.open = false
			}
		},
		computed: {
			editData() {
				return this.$store.state.user.editUserInfo
			},
			userInfo() {
				return this.$store.state.user.userInfo
			},
			endDate() {
				return this.$tools.timestamp(new Date() / 1000)
			}

		},
		created() {
			let userData = JSON.stringify(this.editData);
			this.temUserInfo = JSON.parse(userData)
		},
		mounted() {},
	}
</script>

<style lang="scss" scoped>
	.opacity-tr {
		opacity: 0;
	}

	.content {
		width: 630rpx;
		background: #FFFFFF;
		padding: 50rpx 50rpx 100rpx 50rpx;

		.highlight {
			color: #C98D58;
		}
	}

	.nickname {
		border-bottom: 1rpx solid rgba($color: #191919, $alpha: 0.1);
	}

	.checkBox {
		position: relative;
		top: -20rpx;
	}

	.gender {
		padding: 0 60rpx;
	}

	.inner {
		margin-top: 60rpx;
	}

	.radio {
		position: relative;
		top: -20rpx;
	}

	u-radio-group {
		width: 100%;
		display: flex;
		justify-content: space-between;
	}
</style>
